<template>
	<view class="wrapper">
		<SideBarItem :active="model === 0" name="评分榜" :icon="iconHot" @tap="onChange(0)" />
		<SideBarItem :active="model === -1" name="想吃榜" :icon="iconWish" @tap="onChange(-1)" />
		<SideBarItem :active="model === 1" name="肉类" :icon="iconMeat" @tap="onChange(1)" />
		<SideBarItem :active="model === 2" name="鱼类" :icon="iconFish" @tap="onChange(2)" />
		<SideBarItem :active="model === 3" name="小炒" :icon="iconFiredDish" @tap="onChange(3)" />
		<SideBarItem :active="model === 4" name="时蔬" :icon="iconVegatable" @tap="onChange(4)" />
		<SideBarItem :active="model === 5" name="豆制品" :icon="iconDoufu" @tap="onChange(5)" />
		<SideBarItem :active="model === 6" name="汤品" :icon="iconSoup" @tap="onChange(6)" />
	</view>
</template>

<script setup>
import { ref } from 'vue';

import iconHot from '../../static/icons/side_hot.png';
import iconWish from '../../static/icons/side_wish.png';
import iconMeat from '../../static/icons/side_meat.png';
import iconFish from '../../static/icons/side_fish.png';
import iconFiredDish from '../../static/icons/side_fried dish.png';
import iconVegatable from '../../static/icons/side_vegatable.png';
import iconDoufu from '../../static/icons/side_doufu.png';
import iconSoup from '../../static/icons/side_soup.png';

const model = defineModel({ type: Number, default: () => 0 });
const $emits = defineEmits(['change']);

const onChange = (categoryId) => {
	model.value = categoryId;
	$emits('change', categoryId);
};
</script>

<style scoped></style>
